<template>
    <div>
        <el-container>
            <el-header class="header-container">
                <strong class="title">turbo-umbrella</strong>
                <div class="header-right">
                    <el-avatar
                            :src="userInfo.avatar"
                    />
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          {{ userInfo.username }}
                          <el-icon>
                            <arrow-down/>
                          </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="userCenter()">个人中心</el-dropdown-item>
                                <el-dropdown-item @click="logout()">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-link href="https://cn.bing.com/" target="_blank">Bing</el-link>
                    <el-link href="https://www.bilibili.com/" target="_blank">B站</el-link>
                </div>
            </el-header>
            <el-container>
                <el-aside style="min-width: 200px; width : 15vh" >
                    <el-menu
                            class="menu"
                            active-text-color="fff"
                            :default-active="$store.state.editableTabsValue"
                            text-color="#000"
                            background-color="#f0fefe"
                            router
                    >

                        <el-menu-item index="/system/profile" @click="setTabs({title: '主页', index: 'profile'})">
                            <template #title>
                                <component
                                        :is="$icon['House']"
                                        style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
                                >
                                </component>
                                <span>主页</span>
                            </template>
                        </el-menu-item>
                        <!--                        以下是动态加载-->

                        <el-sub-menu :index="e.index" v-for="(e , k) in menuList">
                            <template #title>
                                <component
                                        :is="$icon[e.icon]"
                                        style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
                                >
                                </component>
                                <span>{{ e.title }}</span>
                            </template>
                            <el-menu-item :index="ce.index" v-for="(ce) in e.children" @click="setTabs(ce)">
                                <template #title>
                                    <component
                                            :is="$icon[ce.icon]"
                                            style="width: 1.5em; height: 1.5em; margin-right: 8px;color:#123456"
                                    >
                                    </component>
                                    <span>{{ ce.title }}</span>
                                </template>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main class="main">
                    <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            closable
                            @tabChange="tabChange"
                            @tab-remove="tabRemove"
                    >
                        <el-tab-pane
                                v-for="item in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                        </el-tab-pane>
                    </el-tabs>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {ArrowDown} from "@element-plus/icons";

export default {
    name: "Index",
    components: {ArrowDown},
    data() {
        return {
            userInfo: {
                id: '',
                username: '',
                avatar: '',
            },
        }
    },
    methods: {
        getUserInfo() {
            this.userInfo = this.$auth.getUser()
            // this.$http.get(`/system/user_info`).then(resp => {
            //     this.userInfo = resp.data.data
            // }).catch(err => {
            //
            // })
        },
        logout() {
            this.$http.post(`/user/logout`).then(resp => {

                this.$auth.clearUserAndToken();
                this.$store.commit("clearToken");
                this.$router.push('/login')
            }).catch(err => {

            })
        },
        addTab(tab) {
            let index = this.$store.state.editableTabs.findIndex(e => e.name === tab.name);
            if (index === -1) {
                let s = this.$store.state.editableTabs;
                s.push({
                    title: tab.title,
                    name: tab.name,
                });
                window.localStorage.setItem("editableTabs", JSON.stringify(s));
                this.$store.state.editableTabsValue = tab.name;
            }
            this.$store.state.editableTabsValue = tab.name;
        },
        setTabs(e) {
            const tab = {title: e.title, name: e.index}
            this.addTab(tab)
        },
        tabChange(activeName){
            this.$router.push(activeName);
        },
        userCenter(){
            this.$router.push('user_center');
            this.setTabs({title: '个人中心', index: 'user_center'})
        },
        tabRemove(targetName) {
            if (targetName === 'profile') {
                console.log("Cannot remove home tab!");
                return;
            }
            let tabs = this.$store.state.editableTabs;
            let activeName = this.$store.state.editableTabsValue;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.$store.commit("setEditableTabs", tabs.filter(tab => tab.name !== targetName));
            this.$store.commit("setEditableTabsValue", activeName);
        },

    },
    created() {
        this.getUserInfo();
    },
    computed: {
        menuList: {
            get() {
                return this.$store.state.menuList;
            }
        },
        editableTabsValue: {
            get() {
                return this.$store.state.editableTabsValue;
            },
            set(value) {
                this.$store.commit("setEditableTabsValue", value);
            }
        },
        editableTabs: {
            get() {

                return this.$store.state.editableTabs;
            },
            set(value) {
                this.$store.commit("setEditableTabs", value);
            }
        }

    },
}
</script>

<style scoped>
.title {
    line-height: 60px;
    text-align: center;
    font-size: 24px;
}

.el-container {
    padding: 0;
    margin: 0;
    height: 96vh;
}

.header-container {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
}

.header-right {
    float: right;
    width: 240px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.menu {
    height: 100%;
}

.main {
    padding: 5px;
}

</style>
